<template>
  <view class="detail-page">
    <!-- 头部导航 -->
    <view class="page-header">
      <view class="back-button" @tap="goBack">
        <text class="iconfont">&#xe60f;</text>
      </view>
      <text class="page-title">记录详情</text>
    </view>
    
    <!-- 记录信息 -->
    <view class="record-card">
      <view class="record-header">
        <view class="record-type">{{ getTypeName(recordType) }}</view>
        <view class="record-status" :class="getStatusClass(recordData.status)">
          <text class="status-text">{{ getStatusText(recordData.status) }}</text>
        </view>
      </view>
      
      <view class="record-body">
        <view class="value-container">
          <text class="value-text">{{ recordData.value }}</text>
          <text class="unit-text">{{ getUnitByType(recordType) }}</text>
        </view>
        
        <view class="record-time">
          <text class="date-text">{{ formatDate(recordData.date) }}</text>
          <text class="time-text">{{ formatTime(recordData.date) }}</text>
        </view>
      </view>
      
      <view class="record-notes" v-if="recordData.notes">
        <view class="notes-label">备注</view>
        <view class="notes-content">{{ recordData.notes }}</view>
      </view>
    </view>
    
    <!-- 参考值范围 -->
    <view class="reference-card">
      <view class="card-title">参考范围</view>
      <view class="reference-content">
        <view class="reference-item" v-for="(range, index) in referenceRanges" :key="index" :class="getRefStatusClass(range.status)">
          <view class="range-label">{{ range.label }}</view>
          <view class="range-value">{{ range.value }}</view>
        </view>
      </view>
    </view>
    
    <!-- 健康建议 -->
    <view class="advice-card">
      <view class="card-title">健康建议</view>
      <view class="advice-content">
        <view class="advice-text" v-for="(advice, index) in healthAdvices" :key="index">
          <text class="dot"></text>
          <text class="advice">{{ advice }}</text>
        </view>
      </view>
    </view>
    
    <!-- 操作按钮 -->
    <view class="action-buttons">
      <view class="action-btn delete-btn" @tap="deleteRecord">
        <text class="btn-icon iconfont">&#xe6a7;</text>
        <text class="btn-text">删除记录</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

// 接收页面参数
const props = defineProps({
  type: {
    type: String,
    default: 'bloodPressure'
  },
  time: {
    type: [Number, String],
    default: 0
  }
});

// 记录类型和时间
const recordType = ref(props.type);
const recordTime = ref(parseInt(props.time));

// 记录数据
const recordData = ref({
  value: '',
  date: new Date(),
  status: 'normal',
  notes: ''
});

// 参考范围
const referenceRanges = computed(() => {
  switch(recordType.value) {
    case 'bloodPressure':
      return [
        { label: '正常', value: '< 120/80 mmHg', status: 'normal' },
        { label: '偏高', value: '120-139/80-89 mmHg', status: 'warning' },
        { label: '高血压', value: '≥ 140/90 mmHg', status: 'danger' }
      ];
    case 'bloodSugar':
      return [
        { label: '正常', value: '3.9-6.1 mmol/L', status: 'normal' },
        { label: '偏高', value: '6.1-7.0 mmol/L', status: 'warning' },
        { label: '糖尿病', value: '≥ 7.0 mmol/L', status: 'danger' }
      ];
    case 'bloodLipids':
      return [
        { label: '正常', value: '< 5.2 mmol/L', status: 'normal' },
        { label: '偏高', value: '5.2-6.2 mmol/L', status: 'warning' },
        { label: '高血脂', value: '≥ 6.2 mmol/L', status: 'danger' }
      ];
    case 'uricAcid':
      return [
        { label: '正常', value: '男:149-416 μmol/L，女:89-357 μmol/L', status: 'normal' },
        { label: '偏高', value: '男:>416 μmol/L，女:>357 μmol/L', status: 'warning' }
      ];
    default:
      return [];
  }
});

// 健康建议
const healthAdvices = computed(() => {
  switch(recordType.value) {
    case 'bloodPressure':
      if (recordData.value.status === 'normal') {
        return [
          '保持健康生活方式，适量运动',
          '控制饮食，减少盐分摄入',
          '定期监测血压变化'
        ];
      } else if (recordData.value.status === 'warning') {
        return [
          '减少钠盐摄入，控制在每天6克以下',
          '增加有氧运动，每周至少150分钟',
          '保持心情舒畅，避免情绪波动',
          '建议每周测量血压2-3次'
        ];
      } else {
        return [
          '严格控制饮食，清淡低盐低脂',
          '规律服药，遵医嘱治疗',
          '增加日常活动，避免久坐不动',
          '定期复诊，及时调整治疗方案',
          '建议每天监测血压变化'
        ];
      }
    case 'bloodSugar':
      if (recordData.value.status === 'normal') {
        return [
          '保持合理膳食，控制精制糖摄入',
          '规律作息，保持适量运动',
          '定期监测血糖'
        ];
      } else if (recordData.value.status === 'warning') {
        return [
          '减少碳水化合物和糖分摄入',
          '增加膳食纤维，控制总热量',
          '每天进行30分钟以上的有氧运动',
          '保持体重在合理范围内',
          '建议每周监测血糖2-3次'
        ];
      } else {
        return [
          '严格控制饮食，定时定量',
          '遵医嘱用药或注射胰岛素',
          '适量运动，避免剧烈活动',
          '定期复诊，调整治疗方案',
          '建议每天监测血糖'
        ];
      }
    case 'bloodLipids':
      if (recordData.value.status === 'normal') {
        return [
          '保持低脂饮食，增加膳食纤维摄入',
          '适量运动，保持健康体重',
          '每年检查一次血脂'
        ];
      } else if (recordData.value.status === 'warning') {
        return [
          '减少饱和脂肪酸和胆固醇摄入',
          '增加食用鱼类、橄榄油等健康脂肪',
          '控制体重，每周进行150分钟中等强度运动',
          '避免吸烟和过量饮酒',
          '建议每6个月检查一次血脂'
        ];
      } else {
        return [
          '严格控制饮食，低脂低胆固醇',
          '遵医嘱服用调脂药物',
          '增加日常活动量，保持适当运动',
          '定期复诊，调整治疗方案',
          '建议每3个月检查一次血脂'
        ];
      }
    case 'uricAcid':
      if (recordData.value.status === 'normal') {
        return [
          '保持均衡饮食，控制嘌呤摄入',
          '多饮水，每天2000-3000ml',
          '适量运动，保持健康生活方式'
        ];
      } else {
        return [
          '限制高嘌呤食物摄入，如动物内脏、海鲜等',
          '避免饮酒，特别是啤酒',
          '每天饮水2000-3000ml',
          '控制体重，避免剧烈运动',
          '如有关节不适，请及时就医',
          '建议每3个月检查一次尿酸'
        ];
      }
    default:
      return [];
  }
});

// 页面加载时执行
onMounted(() => {
  loadRecordData();
});

// 加载记录数据
const loadRecordData = () => {
  // 实际项目中应该通过API获取
  // 这里模拟数据
  setTimeout(() => {
    // 创建记录日期
    const recordDate = new Date(recordTime.value);
    
    // 根据类型模拟不同的数据
    let value, status, notes;
    switch (recordType.value) {
      case 'bloodPressure':
        const systolic = Math.floor(Math.random() * 40) + 100; // 100-140
        const diastolic = Math.floor(Math.random() * 30) + 60; // 60-90
        value = `${systolic}/${diastolic}`;
        status = systolic > 130 || diastolic > 85 ? (systolic > 140 || diastolic > 90 ? 'danger' : 'warning') : 'normal';
        break;
      case 'bloodSugar':
        value = (Math.random() * 3 + 4).toFixed(1); // 4.0-7.0
        status = value > 6.1 ? (value > 7.0 ? 'danger' : 'warning') : 'normal';
        break;
      case 'bloodLipids':
        value = (Math.random() * 2 + 3.5).toFixed(1); // 3.5-5.5
        status = value > 4.8 ? (value > 5.2 ? 'danger' : 'warning') : 'normal';
        break;
      case 'uricAcid':
        value = Math.floor(Math.random() * 200 + 250); // 250-450
        status = value > 350 ? (value > 420 ? 'danger' : 'warning') : 'normal';
        break;
    }
    
    // 随机生成备注
    const noteOptions = ['饭前测量', '饭后测量', '服药前测量', '服药后测量', ''];
    notes = noteOptions[Math.floor(Math.random() * noteOptions.length)];
    
    recordData.value = {
      value,
      date: recordDate,
      status,
      notes
    };
  }, 300);
};

// 获取类型名称
const getTypeName = (type) => {
  const typeMap = {
    'bloodPressure': '血压',
    'bloodSugar': '血糖',
    'bloodLipids': '血脂',
    'uricAcid': '尿酸'
  };
  return typeMap[type] || '未知';
};

// 根据类型获取单位
const getUnitByType = (type) => {
  switch (type) {
    case 'bloodPressure':
      return 'mmHg';
    case 'bloodSugar':
      return 'mmol/L';
    case 'bloodLipids':
      return 'mmol/L';
    case 'uricAcid':
      return 'μmol/L';
    default:
      return '';
  }
};

// 根据状态获取样式类
const getStatusClass = (status) => {
  switch (status) {
    case 'normal':
      return 'status-normal';
    case 'warning':
      return 'status-warning';
    case 'danger':
      return 'status-danger';
    default:
      return '';
  }
};

// 获取参考范围状态样式
const getRefStatusClass = (status) => {
  switch (status) {
    case 'normal':
      return 'ref-normal';
    case 'warning':
      return 'ref-warning';
    case 'danger':
      return 'ref-danger';
    default:
      return '';
  }
};

// 获取状态文本
const getStatusText = (status) => {
  switch (status) {
    case 'normal':
      return '正常';
    case 'warning':
      return '偏高';
    case 'danger':
      return '异常';
    default:
      return '未知';
  }
};

// 格式化日期 YYYY-MM-DD
const formatDate = (date) => {
  if (!(date instanceof Date)) {
    date = new Date(date);
  }
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
};

// 格式化时间 HH:MM
const formatTime = (date) => {
  if (!(date instanceof Date)) {
    date = new Date(date);
  }
  return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
};

// 删除记录
const deleteRecord = () => {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除这条健康记录吗？',
    success: (res) => {
      if (res.confirm) {
        // 实际项目中应调用API删除
        uni.showToast({
          title: '删除成功',
          icon: 'success',
          duration: 2000,
          success: () => {
            setTimeout(() => {
              uni.navigateBack();
            }, 2000);
          }
        });
      }
    }
  });
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};
</script>

<style lang="scss">
page {
  background-color: #f5f8f8;
  height: 100%;
}

.detail-page {
  min-height: 100%;
  padding-bottom: 20px;
  
  .page-header {
    padding: 15px 20px;
    background-color: #fff;
    display: flex;
    align-items: center;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin-bottom: 15px;
    
    .back-button {
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      position: absolute;
      left: 15px;
      
      .iconfont {
        font-size: 22px;
        color: #2c7873;
      }
    }
    
    .page-title {
      flex: 1;
      text-align: center;
      font-size: 18px;
      font-weight: 600;
      color: #2c7873;
    }
  }
  
  .record-card, .reference-card, .advice-card {
    background-color: #fff;
    border-radius: 12px;
    margin: 0 15px 15px;
    padding: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }
  
  .record-card {
    .record-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      
      .record-type {
        font-size: 16px;
        font-weight: 600;
        color: #333;
      }
      
      .record-status {
        padding: 4px 10px;
        border-radius: 12px;
        
        .status-text {
          font-size: 12px;
          color: #fff;
        }
        
        &.status-normal {
          background-color: #c3e3e3;
        }
        
        &.status-warning {
          background-color: #f0a500;
        }
        
        &.status-danger {
          background-color: #e57373;
        }
      }
    }
    
    .record-body {
      padding: 20px 0;
      
      .value-container {
        display: flex;
        align-items: baseline;
        justify-content: center;
        margin-bottom: 15px;
        
        .value-text {
          font-size: 36px;
          font-weight: 700;
          color: #2c7873;
        }
        
        .unit-text {
          font-size: 14px;
          color: #6FB3B8;
          margin-left: 5px;
        }
      }
      
      .record-time {
        display: flex;
        flex-direction: column;
        align-items: center;
        
        .date-text, .time-text {
          font-size: 14px;
          color: #999;
        }
        
        .time-text {
          margin-top: 4px;
        }
      }
    }
    
    .record-notes {
      padding: 15px;
      background-color: #f5f8f8;
      border-radius: 8px;
      
      .notes-label {
        font-size: 14px;
        font-weight: 600;
        color: #2c7873;
        margin-bottom: 8px;
      }
      
      .notes-content {
        font-size: 14px;
        color: #555;
        line-height: 1.5;
      }
    }
  }
  
  .reference-card, .advice-card {
    .card-title {
      font-size: 16px;
      font-weight: 600;
      color: #2c7873;
      position: relative;
      padding-left: 12px;
      margin-bottom: 15px;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 16px;
        background-color: #2c7873;
        border-radius: 2px;
      }
    }
  }
  
  .reference-card {
    .reference-content {
      .reference-item {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        border-radius: 8px;
        margin-bottom: 8px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .range-label {
          font-size: 14px;
          font-weight: 500;
          color: #333;
        }
        
        .range-value {
          font-size: 14px;
          color: #666;
        }
        
        &.ref-normal {
          background-color: rgba(195, 227, 227, 0.2);
        }
        
        &.ref-warning {
          background-color: rgba(240, 165, 0, 0.1);
        }
        
        &.ref-danger {
          background-color: rgba(229, 115, 115, 0.1);
        }
      }
    }
  }
  
  .advice-card {
    .advice-content {
      .advice-text {
        display: flex;
        align-items: flex-start;
        margin-bottom: 10px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .dot {
          width: 6px;
          height: 6px;
          border-radius: 3px;
          background-color: #2c7873;
          margin-top: 7px;
          margin-right: 8px;
          flex-shrink: 0;
        }
        
        .advice {
          font-size: 14px;
          color: #555;
          line-height: 1.5;
          flex: 1;
        }
      }
    }
  }
  
  .action-buttons {
    display: flex;
    padding: 15px;
    gap: 15px;
    
    .action-btn {
      flex: 1;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 22px;
      font-size: 14px;
      font-weight: 500;
      
      .btn-icon {
        margin-right: 6px;
        font-size: 16px;
      }
      
      &.delete-btn {
        background-color: #fee6e6;
        color: #e57373;
        border: 1px solid #f9d0d0;
        
        &:active {
          background-color: #fdd9d9;
        }
      }
    }
  }
}
</style> 